<template>
	<view class="cu-card article">
		<view class="cu-item shadow  padding-top" style="margin-bottom:0;">
			<view class="content">
				<view style="width:100%">
					<!-- 退款中的状态 -->
					<view v-if="orderMessage.refundStep&& orderMessage.refundStep >=2">
						<view class="cu-steps">
							<!-- 申请退款中 -->
							<view class="cu-item" :class="orderMessage.refund>=2?'text-primary':''">
								<text class="cuIcon-title"></text>
								{{$t('refundSteps.three')}}
							</view>
							<!-- 退款审核中 -->
							<view class="cu-item" :class="orderMessage.refund>3?'text-primary':''">
								<text class="cuIcon-title"></text>
								{{$t('refundSteps.four')}}
							</view>
							<view class="cu-item" :class="orderMessage.refund==5 || orderMessage.refund==2?'text-primary':''">
								<text class="cuIcon-title"></text>
								<!-- 拒绝退款 -->
								<text v-if="orderMessage.refund==5">{{$t('refundSteps.five')}}</text>
								<!-- 已退款 -->
								<text v-else>{{$t('refundSteps.two')}}</text>
							</view>
						</view>
					</view>
					<!-- 购买状态 -->
					<view v-else>
						<view class="cu-steps" >
							<view class="cu-item" :class="index>step?'': orderMessage.status==='invalid' ? 'text-red' : 'text-primary'" v-for="(item,index) in stepList" :key="index">
								<text :class="'cuIcon-' + item.icon"></text>{{item.name}}
							</view>
						</view>
					</view>
				</view>
			</view>
		</view>
	</view>
</template>

<script>
  export default {
    components: {
    },
    props:{
      message:{
        type:Object,
        default:()=>{
          return {}
        }
      },
      list:{
        type:Array,
        default:()=>{
          return [
            {icon: 'title',name:'待支付'},
            {icon: 'title',name:'已支付'},
            {icon: 'title',name:'已开通'}
          ]
        }
      }
    },
    data() {
      return {
        newList: this.list,
        orderMessage:this.message,
        step:0,
      }
    },
    computed: {
      stepList() {
        const { status } = this.message;
        this.orderMessage = this.message;
        // 默认
        let hasOpen=[
          {icon: 'title',name: '待支付'},//待支付
          {icon: 'title',name: '已支付'},//已支付
          {icon: 'title',name: '已开通'}//已开通
        ];
        // 失效
        let invalid = [
          {icon: 'title',name: '待支付'},//待支付
          {icon: 'title',name: '已失效'}//已失效
        ];
        // 次月生效
        let openNext=[
          {icon: 'title',name: '待支付'},//待支付
          {icon: 'title',name: '已支付'},//已支付
          {icon: 'title',name: '次月生效'}//次月生效
        ];
        // 退款成功
        let refund=[
          {icon: 'title',name: '待支付'},//待支付
          {icon: 'title',name: '已支付'},//已支付
          {icon: 'title',name: '已退款'}//已退款
        ];
        if(status){
          if(status.indexOf('invalid')>-1){
            this.newList = invalid;
            switch(status){
              case 'create':
                this.step = 0;
                break;
              case 'invalid':
                this.step = 1;
                break;
            }
          }else{
            this.newList = status ==='openNext' ? openNext : status==='refund'? refund : hasOpen;
            switch(status){
              case 'create':
                this.step = 0;
                break;
              case 'pay':
                this.step = 1;
                break;
              default:
                this.step = 2;
                break;

            }
          }
        }else{
          this.newList =hasOpen
        }
        return this.newList
      }
    },
    onLoad(opt) {

    },
    onShow() {

    },
    methods: {

    }
  }
</script>

<style lang="less" scope>
@import '@/common/style/main.css';
</style>
